<template>
	<view class="content">
		<view
			class="mix-list-cell"
			:class="border"
			@tap="eventClick"
			hover-class="cell-hover"
			:hover-stay-time="50"
		>
			<i
				v-if="icon"
				class="t-icon"
				:style="[{'width':fontSize, 'height':fontSize }]"
				:class="icon"
			></i>
			<text class="cell-tit clamp">{{ title }}</text>
			<text v-if="tips" class="cell-tip">{{ tips }}</text>
			<text class="cell-more t-icon" :class="navigateType"></text>
		</view>
	</view>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '标题'
    },
    tips: {
      type: String,
      default: ''
    },
    navigateType: {
      type: String,
      default: 'right'
    },
    border: {
      type: String,
      default: 'b-b'
    },
    hoverClass: {
      type: String,
      default: 'cell-hover'
    },
    iconColor: {
      type: String,
      default: '#333'
    },
    fontSize: {
      type: String,
      default: '45rpx'
    }
  },

  methods: {
    // 触发父组件传递的函数
    eventClick() {
      this.$emit('eventClick');
    }
  }
};
</script>

<style lang="scss">
.icon .mix-list-cell .b-b::after {
	left: 90rpx;
}
.mix-list-cell {
	display: flex;
	align-items: center;
	// align-items: baseline;
	padding: 20rpx 20rpx;
	line-height: 60rpx;
	position: relative;

	&.cell-hover {
		background: #fafafa;
	}
	&.b-b::after {
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		height: 0;
		content: '';
		bottom: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		border-bottom: 1px solid #E4E7ED;
		border-bottom-width: 1px;
		border-bottom-style: solid;
    	// border-bottom-color: rgb(228, 231);
	}

	// .cell-icon {
	// 	align-self: center;
	// 	width: 56rpx;
	// 	max-height: 60rpx;
	// 	font-size: 38rpx;
	// }
	.cell-more {
		align-self: center;
		font-size: 30rpx;
		color: #606266;
		margin-left: 10rpx;
	}
	.cell-tit {
		flex: 1;
		font-size: 30rpx;
		color: #303133;
		margin-right: 10rpx;
		margin-left: 15rpx;
	}
	.cell-tip {
		font-size: 30rpx;
	}
}
</style>
